<template>
  <div class="adress-box">
    <div class="adress-header flex-box">
      <div class="adress-header-left flex-box">
        <svg class="icon" aria-hidden="true" @click="routeBack">
          <use xlink:href="#icon-gb-xiazai6"></use>
        </svg>
        <p>选择收货地址</p>
      </div>
      <svg class="icon" aria-hidden="true" @click="toAdressSet">
        <use xlink:href="#icon-gb-jia"></use>
      </svg>
    </div>
    <div class="adress-lists">
      <ul>
        <li class="flex-box" :class="{active:item.default===true}" v-for="(item,index) in lists" :key="index">
          <div class="lists-left flex-box">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-xuanzhong"></use>
            </svg>
            <div class="lists-main">
              <h3>{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>13049422520</span><i v-if="item.dafault"> [默认]</i></h3>
              <p>{{item.adress}}</p>
            </div>
          </div>
          <svg class="icon lists-right" aria-hidden="true" @click="toAdressSet(item)">
            <use xlink:href="#icon-gb-iconset0136"></use>
          </svg>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: [
        {
          name: '陈正雄',
          phone: '13049422520',
          adress: '广东省 深圳市 坪山新区 坪山街道深业东城上邸',
          default: true
        },
        {
          name: '王大毛',
          phone: '13049422520',
          adress: '广东省 深圳市 坪山区 东城国际3a1201',
          default: false
        }
      ]
    }
  },
  components: {},
  computed: {},
  methods: {
    routeBack() {
      this.$router.go(-1)
    },
    toAdressSet(data) {
      this.$router.push({ name: 'adressSet', params: { item: JSON.stringify(data) } })
    }
  },
  mounted() {}
}
</script>
<style scoped lang="scss">
.adress-box {
  width: 100%;
  .adress-header {
    width: 100%;
    height: 52px;
    padding: 0 12px;
    box-sizing: border-box;
    justify-content: space-between;
    top: 0;
    left: 0;
    background: #f0f0f0;
    font-size: 16px;
    &::after {
      width: 100%;
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      border-bottom: 1px solid #bbb;
      transform: scaleY(0.2);
      transform-origin: left bottom;
    }
    svg {
      font-size: 20px;
      color: #333;
    }
    .adress-header-left {
      svg {
        font-size: 16px;
      }
      p {
        font-size: 16px;
        margin-left: 6px;
        color: #333;
        position: relative;
        top: 1px;
      }
    }
  }
  .adress-lists {
    width: 100%;
    padding: 0 10px;
    text-align: left;
    box-sizing: border-box;
    ul li {
      padding: 15px 0;
      font-size: 14px;
      line-height: 20px;
      justify-content: space-between;
      position: relative;
      &::after {
        width: 100%;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid #bbb;
        transform: scaleY(0.2);
        transform-origin: left bottom;
      }
      h3 {
        font-size: 16px;
        color: #333;
        span {
          color: #333;
        }
      }
      p {
        color: #666;
      }
      .lists-right {
        font-size: 20px;
        color: #666;
      }
      .lists-left {
        svg {
          margin-right: 8px;
          color: #999;
        }
        .lists-main {
          width: 250px;
        }
      }
    }
    ul li.active {
      h3 {
        color: #1c93d0;
      }
      .lists-left {
        svg {
          color: #1c93d0;
        }
      }
    }
  }
}
</style>
